Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Utility-First的CSS框架
以功能性為主
把各種CSS會用到的屬性簡化為對應的class
p-8→padding: 2rem;
rounded-xl→border-radius: 0.75rem;
md:flex→@media (min-width: 768px) { display: flex; }
2024-03-14 Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史 | blog.tai2.net
基於命名的CSS方法論，在實作時仍需同時考量HTML的構造，反而造成事倍功半
像是BEM或SUIT CSS
CSS in JS能避免class命名的衝突，但會導致過多過細的元件設計而難以管控
Utility-first CSS
2022-09-30 Tailwind考 - uhyo/blog
2023-07-24 Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か
$ npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
2024-04-19 Tailwind CSSを本気でカスタマイズする方法 - Speaker Deck
Tailwind CSS v4
2024-11-30 Tailwind CSS v4 で導入される CSS First Configurations
過去在tailwind.config.js內的相關設定可直接寫在CSS檔內
使用@theme
component
Headless UI
Headless UI - Unstyled, fully accessible UI components
Free Open Source Tailwind CSS Components | HyperUI
Flowrift - Features
Sailboat UI - Modern UI component library for Tailwind CSS
Tailblocks — Ready-to-use Tailwind CSS blocks
Tailwind UI - Official Tailwind CSS Components & Templates
Tailwind CSS Components - 600+ Free Examples and Templates
Tailkits
FlyonUI - Free Tailwind CSS Components Library
函式庫
daisyUI
daisyUI — Tailwind CSS Components
Twind
https://github.com/tw-in-js/twind
整合CSS-in-JS和Tailwind
提供hash過後的class名稱，又能保持既有的Tailwind寫法
適合用在舊專案
或是會和Tailwind CSS的class名稱有衝突的library或框架
Windi CSS
https://windicss.org/
為了改善Tailwind效能問題而啟步的框架
之後許多功能也回流至Tailwind上
目前已不再更新，但仍未棄用
官方推薦改為使用UnoCSS或其他類似框架
windstatic
https://windstatic.com/
Tailwind CSS + Alpine.js